/* 17. Home Page  ------------------------------------------*/

// Slide Show
.slide-categories {
    position: absolute;
    bottom: 80px;
    z-index: 99;
    left: 50%;
    @include transform(translateX(-50%));
    width: 35.5%;
}

.slide-categories-content {
    .item {
        text-align: center;
        background: #fff;
        height: 115px;
        margin-left: 10px;
        margin-right: 10px;
        @extend display-flex;
        @include align-items(center);
        @include justify-content(center);
        @include border-radius(4px);
        a {
            @extend display-flex;
            @include align-items(center);
            @include flex-direction(column);
            padding: 19px;
            svg {
                fill: rgb(153, 153, 153);
                backface-visibility: hidden;
                @include transform(translate3d(0,0,0));
                -webkit-transition: transform .3s cubic-bezier(.21,.6,.44,2.18);
                -moz-transition: transform .3s cubic-bezier(.21,.6,.44,2.18);
                transition: transform .3s cubic-bezier(.21,.6,.44,2.18);
            }
            span {
                display: block;
                color: $grey-primary;
                padding-top: 15px;
            }
            &:hover {
                svg {
                    fill: rgb(255, 131, 0);
                    @include transform(translate3d(0,-10px,0));
                }
            }
        }
    }
}

// Featured
.featured {
    margin-bottom: -10px;
}
.featured-content {
    .item {
        text-align: center;
        .title {
            padding: 30px 0 15px;
            font-size: 23px;
            font-weight: bold;
        }
        svg {
            fill: rgb(44, 110, 213);
            backface-visibility: hidden;
            @include transform(translate3d(0,0,0));
            -webkit-transition: transform .3s cubic-bezier(.21,.6,.44,2.18);
            -moz-transition: transform .3s cubic-bezier(.21,.6,.44,2.18);
            transition: transform .3s cubic-bezier(.21,.6,.44,2.18);
        }
        &:hover {
            svg {
                fill: rgb(255, 131, 0);
                @include transform(translate3d(0,-10px,0));
            }
        }
    }
}

.courses {
    padding-bottom: 157px;
}

// Featured courses
.courses-content {
    margin-bottom: -30px;
    position: relative;
    z-index: 99;
    margin-top: -15px;
    .item {
        margin-bottom: 30px;
        margin-top: 15px;
        @include border-radius(4px);
        @include transition(transform 0.5s);
        &:hover {
            @include transform(translateY(-10px));
            .item-thumb {
                .feadtured-course-small {
                    img {
                        @include transform( scale(1.2, 1.2) );
                    }
                }
            }
            .info {
                .title {
                    a {
                        color: $yellow-primary;
                    }
                }
            }
        }
        .item-thumb {
            position: relative;
            
            img {
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
            }
            .feadtured-course-small {
                position: absolute;
                left: 35px;
                bottom: -30px;
                width: 60px;
                height: 60px;
                @include border-radius(50%);
                z-index: 10;
                overflow: hidden;
                img {
                    @include border-radius(50%);
                    @include box-shadow(0px 3px 10px 0px rgba(0, 0, 0, 0.2));
                    @include transition( all 0.8s ease 0s );
                }
            }
        }
        .info {
            padding: 42px 35px 24px 35px;
            background: #fff;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            .teacher {
                font-size: 16px;
                color: #666;
            }
            .title {
                font-size: 22px;
                padding: 18px 0px 14px;
                font-weight: 500;
            }
            .desc {
                border-top: 1px solid #e5e5e5;
                padding-top: 15px;
                padding-bottom: 5px;
                font-weight: 500;
                margin-top: 36px;
                .comments-students {
                    padding-left: 10px;
                    a {
                        margin-right: 10px;
                        color: #999;
                        font-size: 12px;
                        &:hover {
                            i {
                                color: $yellow-primary;
                                -webkit-transform: scale(1.3) translateZ(0);
                                transform: scale(1.3) translateZ(0); 
                            }
                        }
                        &:last-child {
                            margin-right: 0px;
                        }
                        i {
                            padding-right: 9px;
                            @include transform(translateZ(0));
                            -webkit-transition-duration: 0.3s;
                            transition-duration: 0.3s;
                            -webkit-transition-property: transform;
                            transition-property: transform;
                            -webkit-transition-timing-function: ease-out;
                            transition-timing-function: ease-out;
                        }
                    }
                }
            }
        }
    }
}

.price {
    color: #fff;
    @include border-radius(14px);
    font-size: 14px;
}

.free {
    background: $green-color;
    padding: 3px 22px;
}

.notfree {
    background: $pink-color;
    padding: 3px 13px;
}

// Our Team
.our-team-content {
    margin: -15px 0;
    .slick-active {
        &:hover {
            .item {
                @include box-shadow(0px 3px 10px 0px rgba(0, 0, 0, 0.1));
                border: 1px solid transparent;
            }
        }
    }
    .item {
        text-align: center;
        padding: 45px 20px;
        border: 1px solid #e5e5e5;
        background: #fff;
        box-shadow: none;
        @include border-radius(4px);
        margin: 15px 0;
        figure {
            position: relative;
            width: 165px;
            height: 165px;
            margin: 0 auto;
            img {
                @include border-radius(50%);
            }
            &:after {
                position: absolute;
                content: "";
                width: 100%;
                height: 100%;
                background: rgba(255, 131, 0, 0.9);
                opacity: 0;
                top: 0;
                left: 0;
                z-index: 4;
                @include transition(opacity 0.5s);
                @include border-radius(50%);
            }
            .our-team-socials {
                z-index: 10;
                opacity: 0;
                width: 100%;
                ul {
                    @extend list-type-ulli;
                    li {
                        margin-right: 15px;
                        a {
                            font-size: 17px;
                            i {
                                @include transition(all 0.5s);
                                @include transform(scale(0));
                                color: #fff;
                            }
                            &:hover {
                                i {
                                    color: $black-title;
                                }
                            }
                        }
                        &:last-child {
                            margin-right: 0px;
                        }
                    }
                }
            }
            &:hover {
                &:after {
                    opacity: 1;
                }
                .our-team-socials {
                    opacity: 1;
                    ul {
                        li {
                            a {
                                i {
                                    @include transform(scale(1));
                                }
                            }
                        }
                    }
                }
            }
        }
        .info {
            .title {
                font-size: 20px;
                padding: 35px 0 10px;
            }
            .job-title {
                font-size: 16px;
            }
            .desc {
                padding: 16px 20px 10px;
            }
        }
    }
}

// Testimonials
.testimonials-content {
    padding-bottom: 38px;
    .item {
        .info {
            padding: 40px 45px;
            background: #fff;
            @include box-shadow(0px 3px 10px 0px rgba(0, 0, 0, 0.1));
            @include border-radius(4px);
            margin-bottom: 35px;
            .item-name {
                font-size: 18px;
                font-family: 'Montserrat';
                font-weight: 500;
                color: $blue-primary;
            }
            .desc {
                padding-top: 20px;
            }
        }
        figure {
            @extend display-flex;
            @include align-items(center);
            img {
                width: 75px;
                height: 75px;
                @include border-radius(50%);
                margin-right: 30px;
            }
            .thumb-info {
                .title {
                    font-size: 20px;
                    padding-bottom: 8px;
                }
                .categories {
                    font-size: 16px;
                    color: #666;
                }
            }
        }
    }
}

// Sign up
.sign-up {
    background: #fff url('../images/home1-signup-bg.jpg') no-repeat center center;
    @include background-size(cover);
    background-attachment: fixed;
}

.sign-up-2 {
    background: #fff url('../images/home3-signup-bg.jpg') no-repeat center center;
    @include background-size(cover);
    background-attachment: fixed;
}

.sign-up-content {
    position: relative;
    z-index: 99;
    .sign-up-form {
        padding: 45px 25px;
        background: #fff;
        @include border-radius(4px);
        @include box-shadow(0px 7px 10px 0px rgba(0,
        0,
        0,
        0.15));
        margin-right: 95px;
        .form-heading {
            text-align: center;
            padding: 0 30px;
            margin-bottom: 30px;
            h3 {
                font-size: 26px;
                position: relative;
                padding-bottom: 20px;
                &:after {
                    position: absolute;
                    content: "";
                    width: 50px;
                    height: 3px;
                    background: $blue-primary;
                    bottom: 0;
                    left: 50%;
                    @include transform(translateX(-50%));
                }
            }
        }
        form {
            .form-group {
                input {
                    width: 100%;
                    padding: 15px 20px;
                    padding: 9px 20px;
                    border: none;
                    border-bottom: 1px solid #e5e5e5;
                    margin-bottom: 5px;
                    &::-webkit-input-placeholder {
                        /* Chrome/Opera/Safari */
                        color: #666;
                        font-size: 14px;
                    }
                    &::-moz-placeholder {
                        /* Firefox 19+ */
                        color: #666;
                        font-size: 14px;
                    }
                    &:-ms-input-placeholder {
                        /* IE 10+ */
                        color: #666;
                        font-size: 14px;
                    }
                    &:-moz-placeholder {
                        /* Firefox 18- */
                        color: #666;
                        font-size: 14px;
                    }
                }
                .error {
                    color: red;
                    margin-top: 10px;
                }
            }
            .submit {
                width: 100%;
                color: #fff;
                background: $yellow-primary;
                font-family: 'Montserrat';
                font-weight: bold;
                border: none;
                text-transform: uppercase;
                padding: 14px 20px;
                @include border-radius(25px);
                cursor: pointer;
                margin-top: 20px;
                margin-bottom: 12px;
            }
        }
    }
    .register-now {
        padding-top: 85px;
        .register-title {
            font-size: 45px;
            color: #fff;
            font-weight: bold;
            padding-bottom: 15px;
        }
        p {
            font-size: 18px;
            color: #fff;
            padding-right: 20px;
        }
    }
}

#count-down-time {
    color: #fff;
    padding-top: 13px;
    .count-down-item {
        display: inline-block;
        padding: 5px 0px;
        width: 90px;
        height: 120px;
        margin-right: 40px;
        &:last-child {
            margin-right: 0px;
        }
        span {
            display: block;
            text-align: center;
        }
        .countdown-number {
            font-family: 'Montserrat';
            font-weight: bold;
            font-size: 60px;
        }
        .countdown-text {
            font-size: 20px;
            margin-top: -16px;
        }
    }
}

// Pricing Table
.pricing-table-content {
    .item {
        text-align: center;
        @include box-shadow(0px 3px 10px 0px rgba(0,0,0,0.1));
        padding: 55px 30px;
        .title {
            font-size: 30px;
            padding-bottom: 27px;
        }
        figure {
            width: 160px;
            height: 160px;
            @include border-radius(50%);
            margin: 0 auto;
            margin-bottom: 28px;
            svg {
                @include transition( all 0.8s ease 0s );
            }
        }
        .info {
            .advanced {
                @extend list-type-ulli;
                li {
                    font-size: 16px;
                    padding: 17px 0;
                    border-bottom: 1px solid #e5e5e5;
                }
            }
            .price {
                padding-top: 25px;
                padding-bottom: 20px;
                span {
                    font-family: 'Montserrat';
                    font-weight: bold;
                    color: $black-title;
                    &:first-child {
                        font-size: 40px;
                    }
                    &:last-child {
                        font-size: 23px;
                        padding-left: 10px;
                        position: relative;
                        &:after {
                            position: absolute;
                            content: "/";
                            left: 0;
                            // bottom: 0;
                            top: 50%;
                            @include transform(translateY(-50%));
                        }
                    }
                }
            }
            .au-btn {
                @include border-radius(25px);
                margin-bottom: 10px;
            }
        }
        &:hover {
            figure {
                svg {
                    @include transform( scale(1.2, 1.2) );
                }
            }
        }
    }
    .popular {
        position: relative;
        &:after {
            position: absolute;
            content: attr(data-popular);
            background: $yellow-primary;
            color: #fff;
            font-size: 15px;
            left: 50%;
            @include transform(translateX(-50%));
            top: -15px;
            padding: 3px 22px;
            @include border-radius(15px);
        }
    }
}

.basic {
    background: $green-light;
}

.business {
    background: $pink-color;
}

.premium {
    background: $violet-color;
}

// Blog
.blog {
    margin-bottom: -30px;
}
.blog-content {
    .item {
        margin-bottom: 30px;
        figure {
            img {
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
            }
        }
        .info {
            padding: 35px 30px;
            background: #fff;
            border: 1px solid #e5e5e5;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            .title {
                font-size: 20px;
            }
            .desc {
                padding-top: 15px;
                padding-bottom: 27px;
            }
        }
    }
}

.meta {
    padding-bottom: 7px;
    span {
        font-size: 15px;
        margin-right: 20px;
        i {
            color: $blue-primary;
            padding-right: 13px;
        }
        &:last-child {
            margin-right: 0px;
        }
    }
}

// Home 2
.categories {
    margin-bottom: -30px;
}

.cat-1 {
    figure {
        &:after {
            background: rgba(99, 199, 106, 0.8);
        }
    }
}

.cat-2 {
    figure {
        &:after {
            background: rgba(108, 122, 224, 0.8);
        }
    }
}

.cat-3 {
    figure {
        &:after {
            background: rgba(255, 75, 90, 0.8);
        }
    }
}

.cat-4 {
    figure {
        &:after {
            background: rgba(233, 140, 56, 0.8);
        }
    }
}

.cat-5 {
    figure {
        &:after {
            background: rgba(0, 194, 209, 0.8);
        }
    }
}

.categories-content {
    @extend display-flex;
    @include justify-content(space-between);
    .categories-group-2 {
        padding-left: 30px;
        .item {
            margin-bottom: 30px;
        }
    }
    .cat-1 {
        figure {
            width: 500px;
        }
    }
    .item {
        figure {
            position: relative;
            overflow: hidden;
            @include border-radius(4px);
            img {
                @include border-radius(4px);
                width: 100%;
                height: 100%;
                @include transition( all 0.8s ease 0s );
            }
            &:after {
                position: absolute;
                content: "";
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 9;
                @include border-radius(4px);
            }
            .info {
                position: absolute;
                z-index: 99;
                bottom: 17px;
                left: 30px;
                .title {
                    font-size: 20px;
                    padding-bottom: 3px;
                    a {
                        color: #fff;
                    }
                }
                .total-course {
                    font-size: 16px;
                    color: #fff;
                }
            }
            &:hover {
                img {
                    @include transform( scale(1.2, 1.2) );
                }
            }
        }
    }
}

.featured-2 {
    margin-bottom: -8px;
    .featured-content {
        .item {
            .title {
                font-size: 20px;
                padding: 23px 0 11px;
                font-weight: 500;
            }
        }
    }
}

.courses-2 {
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    @include background-size(cover);
    background-attachment: fixed;
    .section-title-white {
        .title-desc {
            width: 45%;
        }
    }
    .courses-content {
        .item {
            .info {
                padding: 46px 35px 24px 35px;
            }
        }
    }
}

.home2-testimonials {
    margin-bottom: -9px;
}
.home2-testimonials-content {
    width: 66%;
    margin: -15px auto;
    .item {
        text-align: center;
        padding: 15px;
        .info {
            padding: 45px 24px 85px;
            background: #fff;
            @include box-shadow(0px 3px 15px 0px rgba(0,0,0,0.1));
            @include border-radius(4px);
            .title-item {
                font-size: 22px;
                color: $blue-primary;
                padding-bottom: 15px;
            }
            .desc {
                font-size: 18px;
            }
        }
        figure {
            margin-top: -38px;
            img {
                width: 75px;
                height: 75px;
                @include border-radius(50%);
                margin: 0 auto;
            }
            .title {
                font-size: 20px;
                padding-top: 25px;
                padding-bottom: 8px;
            }
            .job-title {
                font-size: 16px;
            }
        }
    }
}

.events-content {
    .item {
        padding: 40px 30px 40px 160px;
        background: #fff;
        @include border-radius(4px);
        margin-bottom: 30px;
        position: relative;
        @include transition(all 0.5s);
        &:last-child {
            margin-bottom: 0px;
        }
        .post-date {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 130px;
            margin-right: 30px;
            background: $blue-primary;
            @include flex-direction(column);
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            span {
                color: #fff;
            }
            .date {
                font-size: 60px;
                font-family: 'Montserrat';
                font-weight: bold;
                margin-top: -18px;
            }
            .month {
                font-size: 18px;
                margin-top: -18px;
            }
        }
        .info {
            width: 75%;
            .course-title {
                @extend display-flex;
                @include align-items(center);
                .title {
                    font-size: 22px;
                    padding-right: 23px;
                }
            }
            .meta {
                padding-top: 12px;
                padding-bottom: 14px;
                span {
                    font-size: 16px;
                    i {
                        padding-right: 8px;
                    }
                }
            }
        }
        figure {
            img {
                width: 130px;
                height: 130px;
                @include border-radius(50%);
            }
        }
        &:hover {
            @include box-shadow(0px 3px 15px 0px rgba(0,0,0,0.1));
            @include transform(scale(1.05));
        }
    }
}

// Partner
.partner {
    padding: 58px 0;
}

.partner-content {
    .item {
        figure {
            img {
                margin: 0 auto;
                -webkit-filter: grayscale(100%);
                /* Safari 6.0 - 9.0 */
                filter: grayscale(100%);
                opacity: 0.5;
            }
            &:hover {
                img {
                    -webkit-filter: grayscale(0);
                    filter: grayscale(0);
                    opacity: 1;
                }
            }
        }
    }
}

.categories-2-content {
    .item {
        figure {
            position: relative;
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
                @include transition( all 0.8s ease 0s );
            }
            &:after {
                position: absolute;
                content: "";
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 9;
            }
            .info {
                position: absolute;
                z-index: 99;
                top: 50%;
                left: 50%;
                @include transform(translate(-50%,
                -50%));
                text-align: center;
                svg {
                    fill: rgb(255, 255, 255);

                }
                .title {
                    font-size: 25px;
                    padding-bottom: 3px;
                    padding-top: 13px;
                    a {
                        color: #fff;
                    }
                }
                .total-course {
                    font-size: 16px;
                    color: #fff;
                }
            }
            &:hover {
                img {
                    @include transform( scale(1.2, 1.2) );
                }
            }
        }
    }
}

.our-team-2 {
    margin-bottom: -30px;
}

.team-group {
    .team-group-title {
        font-size: 23px;
        font-weight: bold;
        margin-bottom: 25px;
    }
    .team-group-title-green {
        color: #63c76a;
    }
    .team-group-title-violet {
        color: #8058bd;
    }
    .team-group-title-blue {
        color: #4ec8f7;
    }
    .team-group-content {
        margin: 0 -15px;
    }
    .item {
        padding: 15px;
        margin-bottom: 13px;
        @include transform(translateY(0,0,0));
        @include transition(transform .3s cubic-bezier(.27,-.22,.26,1.37));
        figure {
            width: 80px;
            height: 80px;
            padding: 2px;
            border: 3px dotted $blue-primary;
            margin-bottom: 30px;
            @include border-radius(50%);
            img {
                @include border-radius(50%);
            }
        }
        .info {
            @include box-shadow(0px 3px 10px 0px rgba(0,
            0,
            0,
            0.12));
            background: #fff;
            padding: 21px 25px;
            margin-right: 10px;
            position: relative;
            @include border-radius(4px);
            &:after {
                position: absolute;
                content: "";
                width: 0px;
                height: 0px;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 13px solid #fff;
                top: -13px;
                left: 20px;
                // @include box-shadow(0px 3px 10px 0px rgba(0, 0, 0, 0.12));
            }
            &:before {
                content: '';
                position: absolute;
                transform: rotate(135deg);
                width: 15px;
                height: 15px;
                top: -8px;
                z-index: -1;
                @include box-shadow(0px 3px 10px 0px rgba(0,
                0,
                0,
                0.12));
            }
            .title {
                font-size: 18px;
                padding-bottom: 3px;
            }
            .job-title {
                font-size: 15px;
            }
        }
        &:hover {
            @include transform(translateY(-10px));
        }
    }
}

.our-skillls-content {
    padding-top: 45px;
    .list-skills {
        padding-top: 37px;
        .title {
            font-size: 34px;
            font-weight: bold;
            padding-bottom: 12px;
        }
        .desc {
            font-size: 16px;
        }
    }
    .skills {
        margin-top: 70px;
        .progress-bar {
            background-color: transparent;
        }
        .progress-box {
            padding-bottom: 59px;
        }
        .au-progress {
            position: relative;
            background-color: rgb(242, 242, 242);
            max-width: 100%;
            @include border-radius(4px);
            .au-progress-bar {
                height: 7px;
                width: 0;
                @include transition(1s all);
                position: relative;
                @include border-radius(4px);
                h5,
                span {
                    position: absolute;
                    top: -36px;
                }
                h5 {
                    left: 0;
                    font-size: 16px;
                    color: #000033;
                }
                span {
                    right: -15px;
                    font-size: 16px;
                    color: #666;
                }
            }
            .au-progress-green {
                background: $green-color;
            }
            .au-progress-violet {
                background: $violet-color;
            }
            .au-progress-blue {
                background: #4ec8f7;
            }
            .au-progress-pink {
                background: $pink-color;
            }
        }
    }
    .our-skillls-image {
        padding-right: 56px;
        figure {
            text-align: right;
        }
    }
}

.home3-testimonials {
    .section-title {
        position: relative;
        z-index: 99;
        h2 {
            color: #fff;
            &:after {
                background: #fff;
            }
        }
    }
    .home2-testimonials-content {
        z-index: 99;
        .item {
            figure {
                .title {
                    a {
                        color: #fff;
                    }
                }
                .job-title {
                    color: #f2f2f2;
                }
            }
        }
    }
}

.event-shadow {
    .events-content {
        .item {
            @include box-shadow(0px 3px 10px 0px rgba(0,
            0,
            0,
            0.1));
        }
    }
}